<template>
  <div>
    <!-- <h1>   - - - - - - - 我是笑话段子页面- - - - - - -  </h1> -->

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

      <div ref="box">

          <div v-for="item in jokesList" :key="item.index" class="joke_box">
            <p>{{item.updateTime}}</p>
            <p v-html="item.content"></p>
          </div>

      </div>
  
    </van-pull-refresh>

    
  </div>
</template>


<script>

import Vue from 'vue';
import { PullRefresh,Toast } from 'vant';

Vue.use(PullRefresh).use(Toast);

export default {
  data() {
    return {
      difference: 0,
      page:1,
      jokesList:[],
      isLoading: false

    };
  },
  watch: {
    difference: {
      handler(newval) {
        // console.log(newval)
        if (newval < 0) {
          this.page += 1;
          if (this.page <= 5) {
            Toast('正在加载中。。');
            this.jokes();
          } else {
            Toast('无法加载更多了，亲～～～');
          }
        }
      },
    },
  },
  methods: {
    jokes(){
      this.$axios.get('/jokes/list?page='+this.page).then(res=>{
        // console.log(res.data)
        if(res.data.code===1){
          this.jokesList = [...this.jokesList,...res.data.data.list]
        }
      })
    },
    onRefresh() {
      setTimeout(() => {
        this.page=1
        this.jokesList=[]
        this.jokes()
        this.$toast('刷新成功');
        this.isLoading = false;
        
      }, 500);
    },
    diff() {
      // console.log(this.$refs.box);
      this.difference = this.$refs.box.getBoundingClientRect().bottom - window.innerHeight;
    }

  },
  created(){
    this.jokes()
  },
  mounted() {
    window.addEventListener('scroll', this.diff);
  }
};

</script>

<style lang="less" scoped>

.joke_box{
  width: 90%;
  margin: 10px auto;
  border-radius: 10px;
  background-color: #efefef;
  padding: 1px 8px;
  line-height: 1.3;
  p{
    font-size: 12px;
    color: #666;
    &:last-child{
      color: #444;
      font-size: 13px;
      line-height: 1.4;
    }
  }
}


</style>
